<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/include/taglibs.jsp"%>

<script type="text/javascript">

//예약페이지로 이동
function goReserrvation(p_id,me,rdate,pg_no){
	
	if($(me).html().indexOf("예약대기")>-1 || $(me).html().indexOf("예약완료")>-1){
		return false;
	}

	<c:if test="${'N'==pensionInfo.reservation_yn}">
	alert("예약은 전화로만 가능합니다");
	return false;
	</c:if>
	
	location.href="./petc0101Q.do?p_id="+p_id+"&reservation_dt="+rdate+"&pg_no="+pg_no;
}

function goNextMonth(nextNum){
	var nDt = new Date();
	nDt.set({year:${fn:substring(reservation_dt,0,4)},month:(Number(${fn:substring(reservation_dt,4,6)})-1),day:Number(${fn:substring(reservation_dt,6,8)})});
	nDt.addMonths(nextNum);


	var nowDt =new Date();
	if(Number(nowDt.toString("yyyyMMdd")) > Number(nDt.toString("yyyyMMdd"))){
// 		alert("오늘 이전자료는 선택할수 없습니다.");
		location.href="./petc100Q.do?p_id=${param.p_id}&reservation_dt="+nowDt.toString("yyyyMMdd");
		return false;
	}
	
	location.href="./petc100Q.do?p_id=${param.p_id}&reservation_dt="+nDt.toString("yyyyMMdd");
}

var tooltipLeftMargin=20;
var tooltipTopMargin=0;
//툴팁 이동
function moveTip(me){
	var chkWidth = tooltipLeftMargin+window.event.x;
	if((chkWidth+$("#tipDiv").width()) >$("html").width()){
		$("#tipDiv").css("left",(chkWidth - $("#tipDiv").width() -30) +"px");
	}else{
		$("#tipDiv").css("left",(chkWidth) +"px");
	}
	$("#tipDiv").css("top",(globalMouseY) +"px");
}
//툴팁 숨기기
function hideTip(){
	$("#tipDiv").hide();
}

//팝업숨기기
function closeMe(){
	$("#layerPopup").hide();
}

//쿠키설정후 팝업숨기기
function cookieSet(dayNum)
{
	var oDate, expiresDate;
	oDate = new Date();
	oDate.setDate(oDate.getDate() + dayNum);        
	expiresDate = oDate.toGMTString();
	document.cookie = "popnew=Y; expires=" + expiresDate + "; path=/;";
	closeMe();
}

var tooltipLeftMargin = 20;
$(document).ready(function(){
	$(".divPopup").each(function (){
		
		$(this).mouseover(function(evt){
			$("#p_pay").html("사이트 현황 : "+$(this).attr("state1"));
			$("#p_r_status").html("사이트 : "+$(this).attr("site"));
			$("#p_r_status2").html("사이트 현황 : "+$(this).attr("state2"));
			$("#p_nm").html($(this).attr("site_nm"));
			
			var busy_type = $(this).attr("busy_type");
			var busy_type_nm="";
			
			if(""==busy_type){
				var dt = $(this).attr("dt");
				var nDt = new Date();
				nDt.set({year:Number(dt.substr(0,4)),month:(Number(dt.substr(4,2))-1),day:Number(dt.substr(6,2))});
				var dayName_ = nDt.toString("ddd");
				busy_type = "0101";
				if('Fri'==dayName_){
					busy_type = "0102";
				}
				if('Sat'==dayName_){
					busy_type = "0103";
				}
			}
			
			
			if("0101"==busy_type){
				busy_type_nm= "[비수기 주중]";
			}else if("0102"==busy_type){
				busy_type_nm="[비수기 금요일]";
			}else if("0103"==busy_type){
				busy_type_nm="[비수기 토요일]";
			}else if("0104"==busy_type){
				busy_type_nm="[준수기 주중]";
			}else if("0105"==busy_type){
				busy_type_nm="[준수기 금요일]";
			}else if("0106"==busy_type){
				busy_type_nm="[준수기 토요일]";
			}else if("0107"==busy_type){
				busy_type_nm="[성수기 주중]";
			}else if("0108"==busy_type){
				busy_type_nm="[성수기 금요일]";
			}else if("0109"==busy_type){
				busy_type_nm="[성수기 토요일]";
			}
			$("#p_status").html(busy_type_nm);
			
			var scrollT =0;
			if(jQuery.browser.msie){
				scrollT = $("html").scrollTop();
			}else{
				scrollT = $("body").scrollTop();
			}
			
			$("#divPop").css("left",evt.clientX+20);
			$("#divPop").css("top",(evt.clientY+scrollT));
			if((evt.clientY+scrollT+$("#divPop").height()) > $("body").height()){
				$("#divPop").css("top",(evt.clientY+scrollT-$("#divPop").height()));
			}
			
			var chkWidth = tooltipLeftMargin+window.event.x;
			if((chkWidth+$("#divPop").width()) >$("html").width()){
				$("#divPop").css("left",(chkWidth - $("#divPop").width() -30) +"px");
			}else{
				$("#divPop").css("left",(chkWidth) +"px");
			}
			
			$("#divPop").show();
		});
		$(this).mouseout(function(){
			$("#divPop").hide();
		});
	});
	
});

</script>

			<p>해달 날짜, 사이트명에 마우스를 올리면 상세 설명을 볼수 있습니다</p>
			<p><img src="/camping/img/icon_green.jpg" /> 예약가능, <img src="/camping/img/icon_red.jpg" /> 예약완료</p>
			<table style="width: 100%">
				<tr>
					<td colspan="7" style="text-align: center;">
						<div>
							<a href="#" onclick="goNextMonth(-1);" ><img alt="" src="/camping/img/calendar_arrow_l.jpg"  style="vertical-align:top; padding-top: 20px;padding-right: 10px;"></a>
							<strong style="font-size: 36px;font-weight: bold;font-family: Arial Black">${fn:substring(reservation_dt,0,4)}년 ${fn:substring(reservation_dt,4,6)}월</strong>
							<a href="#" onclick="goNextMonth(1);"><img alt="" src="/camping/img/calendar_arrow_r.jpg" style="vertical-align:top; padding-top: 20px;padding-left : 10px;"></a>
						</div>
						<div style="padding-left: 0px;float: right;"><strong style="color: #ff9f52; ">TODAY : ${nDtAll }</strong></div>
						
						
					</td>
				</tr>
			</table>
			<table class="cal1">
				<tr>
					<th class="calRed" style="width:10%">일요일</th>
					<th class="calBlack" style="width:10%">월요일</th>
					<th class="calBlack" style="width:10%">화요일</th>
					<th class="calBlack" style="width:10%">수요일</th>
					<th class="calBlack" style="width:10%">목요일</th>
					<th class="calBlack" style="width:10%">금요일</th>
					<th class="calBlue" style="width:10%">토요일</th>
				</tr>
				${txtCal }
			</table>
<div id="divPop" style="display:none; width:220px;position: absolute;left: 20px;top:10px; ">
	<div class="calJuganBack">
		<table class="calPop">
			<tr height="10">
				<td ><b id="p_nm">비앙카1</b></td>
				<td  style="text-align: right;"><b id="p_status">[비수기주중]</b></td>
			</tr>
		</table>
	</div>
	<div style="background-color: white;">
		<table class="calPopBum">
			<tr>
				<td colspan="2" id="p_pay">사이트 현황 : 5/12</td>
			</tr>
			<tr>
				<td colspan="2" id="p_r_status">사이트 : 데크, 잔듸, 파쇄석</td>
			</tr>
			<tr>
				<td colspan="2" id="p_r_status2">상태 : 예약가능 (부분 2박예약)</td>
			</tr>
		</table>
	</div>
<!-- 	<div style="background-color: white;"> -->
<!-- 		<table class="calPopBum"> -->
<!-- 			<tr> -->
<!-- 				<td colspan="2" id="p_r_status">사이트 : 잔듸</td> -->
<!-- 			</tr> -->
<!-- 			<tr> -->
<!-- 				<td colspan="2" id="p_r_status">크기 : 가로 8m, 세로 10m</td> -->
<!-- 			</tr> -->
<!-- 			<tr> -->
<!-- 				<td colspan="2" id="p_r_status">금액 : 40000원</td> -->
<!-- 			</tr> -->
<!-- 			<tr> -->
<!-- 				<td colspan="2" id="p_r_status">상태 : 예약가능 (2박예약)</td> -->
<!-- 			</tr> -->
<!-- 		</table> -->
<!-- 	</div> -->
</div>